<template>
	<view class="slicing-off-detail-page-content">
		<!-- ########### -->
		<view class="list-items-group">
			
			<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
				<uni-swipe-action-item :auto-close="false">
					<view class="list-item-show">
						<view class="index-view">
							<uni-badge :text="list.length-index" type="primary" size="normal" />
						</view>
						<view class="content-view auto-wrap">{{item.materialno}}</view>
					</view>
					<template v-slot:right>
						<view class="swipe-action-btn danger" @tap.stop="onDel(index)"><text>删除</text></view>
					</template>
				</uni-swipe-action-item>
			</view>
						
		</view>
	</view>
</template>

<script>
export default {
	name:'slicingOffDetailPageContent',
	emits:['listChange'],
	data(){
		return {
			list:[]
		}
	},
	methods:{
		init(arr) {
			this.list = arr
		},
		onDel(index) {
			this.list.splice(index,1)
			this.$emit('listChange',this.list)
		}
	}
}
</script>

<style lang="scss" scoped>
.slicing-off-detail-page-content {
	height: 100%;
	overflow: auto;
	.list-items-group{
		.list-item {
			margin-bottom: 12rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.list-item-show{
		background-color: $uni-bg-color;
		display: flex;
		.index-view{
			flex-shrink: 0;
			padding: 16rpx 4rpx 0 16rpx;
		}
		.content-view{
			flex-grow: 1;
			width: 1px;
			font-size: 32rpx;
			padding: 16rpx 8rpx;
			line-height: 1.3em;
		}
	}
	.swipe-action-btn{
		display: flex;
		color: $uni-bg-color;
		background-color: $u-primary;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100rpx;
		&.danger{
			background-color: $u-error;
		}
	}
}
</style>